<template>

  <div id="addProduct" class="addProduct">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <router-link to="/user/manage" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
      <span slot="center" style="font-size:18px">添加商品</span>
    </yd-navbar>

    <!-- content -->
    <div class="content-addProduct">
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">商品图：(默认第一张为主图)</span>
        </yd-cell-item>
        <form enctype="multipart/form-data" style="padding:15px 0;">
          <input style="padding-left:15px;width:85%;" type="file" ref="pic" name="file" multiple="multiple" />
          <!---->
          <yd-button bgcolor="#2196f3" color="#fff" @click.native="upload">上传</yd-button>
          
        </form>
      </yd-cell-group>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">选择分类：</span>
          <!--
          <div class="block" slot="right">
            <el-cascader placeholder="搜索分类" :options="items" filterable change-on-select v-model.trim="categoryId"></el-cascader>
          </div>
          -->
          <select slot="right" v-model.trim="categoryId">
            <option value="0"> 请选择分类：</option>
            <option value="2">服装</option>
            <option value="3">鞋帽配饰</option>
            <option value="4">日化护肤</option>
            <option value="5">美妆</option>
            <option value="6">宠物</option>
            <option value="7">数码</option>
            <option value="8">家电</option>
            <option value="9">图书</option>
            <option value="10">影音</option>
            <option value="11">休闲食品</option>
            <option value="12">创意</option>
            <option value="13">其他</option>
          </select>

        </yd-cell-item>

        <yd-cell-item>
          <span slot="left">名称：</span>
          <yd-input slot="right" required v-model.trim="name" max="20" :showSuccessIcon="false"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">介绍：</span>
          <yd-input slot="right" v-model.trim="subtitle"></yd-input>
        </yd-cell-item>
      </yd-cell-group>

      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">商品描述：</span>
          <yd-input slot="right" v-model.trim="detail" max="20" :showSuccessIcon="false"></yd-input>
        </yd-cell-item>
      </yd-cell-group>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">价格(￥)：</span>
          <yd-input slot="right" v-model.trim="price" max="20" :showSuccessIcon="false"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">库存：</span>
          <yd-input slot="right" v-model.trim="stock" max="20" :showSuccessIcon="false"></yd-input>
        </yd-cell-item>
      </yd-cell-group>

      <yd-cell-group>
        <yd-cell-item arrow>
          <span slot="left">是否上架：</span>
          <select slot="right" v-model.trim="status">
                <option value="1"> 是</option>
                <option value="0">否</option>
            </select>
        </yd-cell-item>
      </yd-cell-group>
      <yd-button size="large" @click.native="add" bgcolor="#2196f3" color="#fff">添加</yd-button>
    </div>
  </div>
</template>

<script>
  import axios from '../../axios'
  import baseService from '../../axios/'
  export default {
    name: 'addProduct',
    data() {
      return {
        message: '添加商品',
        categoryId: '0',
        name: '',
        subtitle: '',
        subImages: [],
        detail: '',
        price: '',
        stock: '',
        status: '1',
        file: '',
        items: [{
            value: 'fuzhuang',
            label: '服装',
            children: [{
                value: 'nanzhuang',
                label: '男装'
              },
              {
                value: 'nvzhuang',
                label: '女装'
              },
              {
                value: 'tongzhuang',
                label: '童装'
              },
              {
                value: 'qinglvzhuang',
                label: '情侣装'
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: 'xiemaoxiangbao',
            label: '鞋帽箱包',
            children: [{
                value: 'xielei',
                label: '鞋类'
              },
              {
                value: 'xiangbao',
                label: '箱包'
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }

            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          },
          {
            value: '',
            label: '',
            children: [{
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              },
              {
                value: '',
                label: ''
              }
            ]
          }
        ]
      }
    },
    // mounted() {
    //   this.getDeepCategory()
    // },
    methods: {
      // getDeepCategory() {
      //   let param = new URLSearchParams();
      //   param.append("categoryId", 1);
      //   baseService.post('/product/getCategory.do', param).then((res) => {
      //     if (res.data.status == 0) {
      //       let myData = res.data.data;
      //       let length = myData.length;

      //       for (let i = 0; i < length; i++) {
      //         this.items[i].value = myData[i].id;
      //         this.items[i].label = myData[i].name;
      //         console.log(this.items[i]);
      //         let categoryid = myData[i].id;

      //         let newParam = new URLSearchParams();
      //         newParam.append("categoryId", categoryid);
      //         baseService.post('/product/getCategory.do', newParam).then((res) => {
      //           if (res.data.status == 0) {
      //             let newData = res.data.data;
      //             let newLength = newData.length;
      //             // console.log(newData);
      //             // console.log(`二级分类长度= ${newLength} `);
      //             for (let j = 0; j < newLength; j++) {
      //               this.items[i].children[j].value = newData[j].id;
      //               this.items[i].children[j].label = newData[j].name;
      //               // console.log(this.items[i].children);
      //             }
      //           }
      //         })

      //       }
      //     }
      //   })

      // },
      upload: function () {
        // 文件批量上传
        let length = this.$refs.pic.files.length;
        for (let i = 0; i < length; i++) {
          let file = this.$refs.pic.files[i]
          let formData = new FormData()
          formData.append('file', file)
          console.log(this.$refs.pic.files);
          baseService.post('/manage/product/upload.do', formData).then((res) => {
            if (res.data.status == 10 || res.data.status == 1) {
              this.$dialog.alert({
                mes: res.data.msg
              });
              this.$router.push({
                path: '/user/login'
              })
            }
            if (res.data.status == 0) {
              this.subImages[i] = res.data.data.url;
              if(i = --length){
              console.log(this.subImages);
                this.$dialog.alert({
                  mes: "上传成功"
                })  
              }
            }
          })
        }
      },
      add: function () {
        // this.upload();
        let param = new URLSearchParams();
        let categoryId = this.categoryId;
        // let CategoryId = this.categoryId[length];
        let name = this.name;
        let subtitle = this.subtitle;
        console.log(this.subImages.toString());
        let subImages = this.subImages.toString();
        let detail = this.detail;
        let price = this.price;
        let stock = this.stock;
        let status = this.status;
        param.append("categoryId", categoryId);
        param.append("name", name);
        param.append("subtitle", subtitle);
        param.append("subImages", subImages);
        param.append("detail", detail);
        param.append("price", price);
        param.append("stock", stock);
        param.append("status", status);
        baseService.post('/manage/product/save.do', param).then((res) => {
          // this.msg = res.data.msg;
          if (res.data.status == 10 || res.data.status == 1) {
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.$router.push({
              path: '/user/login'

            })
          }
          if (res.data.status == 0) {
            this.$dialog.alert({
              mes: res.data.msg
            });
          }
        })
      }


    }
  }

</script>

<style>
  .addProduct .content-addProduct {
    position: fixed;
    padding-top: 15%;
    height: 100%;
    width: 100%;
    /* overflow-y: auto !important;*/
  }

  .categoryList .el-cascader__label {
    line-height: 50px;
  }

</style>
